<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">按钮</button>
    <ul>
        <li class="text">lorem001</li>
        <li>lorem002
            <a href="#" class="text">超链接</a>
        </li>
        <li>lorem003</li>
    </ul>

    <table>
        <tr>
            <td>lorem0001</td>
            <td>lorem0002</td>
            <td>lorem0003</td>
        </tr>
        <tr>
            <td>lorem0001</td>
            <td>lorem0002</td>
            <td>lorem0003</td>
        </tr>
        <tr>
            <td>lorem0001</td>
            <td>lorem0002</td>
            <td>lorem0003</td>
        </tr>
    </table>

    <input type="text">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
    <script>
        //绑定事件
        //-----语法1
        //类似于DOM0的绑定事件方式
        //jquery对象.事件类型(function(){})
        $('#btn').click(function () {
            console.log('你点击了按钮1111');
        })
        $('#btn').click(function () {
            console.log('你点击了按钮2222');
        })

        //----- 语法2
        //jquery对象.on('事件类型',['委托对象'],事件函数）
        // let fn = function () {
        //     console.log('发生了点击事件');
        // }
        // $('ul').on('click', fn)

        // $('ul').on('click', 'li', function () {
        //     console.log('你点击了li');
        // })

        $('ul').on('click', '.text', function (event) {
            // console.log('你点击了有text类名的元素');
            // console.log(this);//就是触发事件的dom节点，是一个原生对象节点
            // console.log(event.target);
            // $(this).css('color','red')
            this.style.color = 'blue';
        })


        //关闭事件
        // $('ul').off('click', fn)

        //----- 事件对象
        $('table').on('click', 'tr', function (event) {
            console.log('target:', event.target);
            console.log('currentTarget:', event.currentTarget);
            console.log(this);
            console.log(event.pageX);
            console.log(event.clientX);

        })


        $('input').on('keydown', function (event) {
            console.log(event.which);

        })



    </script>


</body>

</html>